import { Check, Location, Order } from '@nutui/icons-react-taro'
import { Button } from '@nutui/nutui-react-taro'
import { Text, View } from '@tarojs/components'
import dayjs from 'dayjs'
import React, { useMemo } from 'react'
import { useRequest } from 'taro-hooks'
import Icon from '../../components/icon-font'
import Layout from '../../components/layout'
import { THEME_COLORS } from '../../constants'
import { useNavigation } from '../../hooks'
import { getAppointmentDetail } from '../../services/appointment'
import './index.less'

const AppointmentSuccess: React.FC = () => {
  const { params, goHome, navigateTo } = useNavigation()
  const orderNo = params.orderNo as string

  // 获取预约详情
  const { data: appointmentDetail, loading } = useRequest(() => getAppointmentDetail(orderNo), {
    ready: !!orderNo,
  })

  // 处理查看预约
  const handleViewAppointments = () => {
    navigateTo({ url: '/pages/order/index' })
  }

  // 处理返回首页
  const handleBackToHome = () => {
    goHome()
  }

  // 格式化日期时间显示
  const formattedDateTime = useMemo(() => {
    if (!appointmentDetail?.detail.beginAt || !appointmentDetail?.detail.endAt) return '未知时间'
    const beginAt = dayjs(appointmentDetail.detail.beginAt * 1000)
    const endAt = dayjs(appointmentDetail.detail.endAt * 1000)
    if (beginAt.isSame(endAt, 'day')) {
      return `${beginAt.format('YYYY-MM-DD HH:mm')} 至 ${endAt.format('HH:mm')}`
    }
    return `${dayjs(appointmentDetail.detail.beginAt).format('YYYY-MM-DD HH:mm')} 至 ${dayjs(appointmentDetail.detail.endAt).format('YYYY-MM-DD HH:mm')}`
  }, [appointmentDetail])

  return (
    <Layout
      title='预约成功'
      showTabBar={false}
      fullLoading={loading}
      footer={
        <View className='footer-buttons'>
          <Button block type='primary' className='primary-btn' onClick={handleViewAppointments}>
            查看我的预约
          </Button>
          <Button block className='secondary-btn' onClick={handleBackToHome}>
            返回首页
          </Button>
        </View>
      }>
      <View className='appointment-success-page'>
        {/* 成功图标和标题 */}
        <View className='success-header'>
          <View className='success-icon-wrapper'>
            <Check className='success-icon' size={48} color={THEME_COLORS.primary} />
          </View>
          <Text className='success-title'>预约成功！</Text>
          <Text className='success-desc'>您的预约已经成功，请准时到达。</Text>
        </View>

        {/* 预约详情卡片 */}
        <View className='appointment-details'>
          {/* 预约时间 */}
          <View className='detail-item'>
            <View className='detail-icon-wrapper'>
              <Icon name='shijian' size={24} color={THEME_COLORS.primary} />
            </View>
            <View className='detail-content'>
              <Text className='detail-label'>预约时间</Text>
              <Text className='detail-value'>{formattedDateTime}</Text>
            </View>
          </View>

          {/* 选择套餐 */}
          <View className='detail-item'>
            <View className='detail-icon-wrapper'>
              <Order size={24} color={THEME_COLORS.primary} />
            </View>
            <View className='detail-content'>
              <Text className='detail-label'>选择套餐</Text>
              <Text className='detail-value'>
                {appointmentDetail?.detail.products.map((product) => product.name).join(',') || '未知套餐'}
              </Text>
            </View>
          </View>

          {/* 预约地址 */}
          <View className='detail-item'>
            <View className='detail-icon-wrapper'>
              <Location size={24} color={THEME_COLORS.primary} />
            </View>
            <View className='detail-content'>
              <Text className='detail-label'>预约地址</Text>
              <Text className='detail-value'>{appointmentDetail?.detail.address.address || '未知地址'}</Text>
            </View>
          </View>
        </View>
      </View>
    </Layout>
  )
}

export default AppointmentSuccess
